<template>
  <div>
    <m-header :title="iNowTitle"></m-header>
    <div class="customer">

      <div class="customer_list">
        <div class="nav">
          <section class="bind_card_w pd_t60">
            <div class="bind_card_line clear">
              <span class="bind_fl fl">兑换卡号:</span>
              <div class="bind_fr">
                <input id="bindCardInput" class="bing_card_input" type="text" name="channelNum" v-model="channelNum"
                       maxlength="15"
                       placeholder="请输入兑换卡号">
              </div>
            </div>
            <p id="bindCardErr" class="bing_care_err">{{ blankMsg }}</p>
            <p class="bind_card_desc pd_t20">* 不同兑换卡可绑定数量不同</p>
            <p class="bind_card_desc">* 每张兑换卡只能给一位客户兑换</p>
            <p class="bind_card_desc">* 请关注官方网站、微信公众账号获取最新活动信息</p>
          </section>
          <div class="btn_big bind_big_btn button" @click="bindCard()">立即绑定</div>
          <!--<div class=“dialog_w” v-if="channelNum == ''" >  {{msg}}  </div>-->
        </div>
      </div>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
  import MHeader from 'base/m-header/m-header'
  import {ERR_OK} from 'config/config'
  import {Toast} from 'mint-ui'
  import 'mint-ui/lib/toast/style.css';

  export default {
    data() {
      return {
        iNowTitle: '绑定兑换卡',
        channelNum: '',
        blankMsg: '',
        msg: '绑定成功'
      }
    },
    created() {

    },
    methods: {
      bindCard() {
        if (this.channelNum == '') {
          this.blankMsg = '卡号不能为空';
          return
        }
        this.$http({
          method: 'post',
          url: '/mobile/api/v1.0/user/channelCoupon/bindChannelCouponOffline',
          data: {
            channelNum: this.channelNum
          }
        }).then((res) => {
          if (res.data.data.code == ERR_OK) {
            Toast("绑定成功")
            this.$router.push({
              path: 'bindSuccess'
            })
          } else {
            this.blankMsg = res.data.data.msg;
            Toast(res.data.data.msg)
          }
        }).catch((err) => {
          console.log(err)
        })
      }
    },
    components: {
      MHeader
    }
  }

</script>

<style lang="less" rel="stylesheet/less" scoped>
  .bind_fr{}
</style>
